<template>
 <div class="gardItem"> 
   <div class="short"> </div>
   <div class="short"> </div>
   <div class="short"> </div>
   <div class="short"> </div>
   <div class="long"> </div>  
   <div class="number"> {{ num }} </div>  
 </div> 
</template>
<script> 
export default { 
  props:{
    num:Number
  }
}
</script>
<style scoped> 
.gardItem{ 
  display: flex;
  align-items: baseline; 
}
.long{
  width: 0px;
  height: 30px; 
  border: 1px solid #000;
  margin-left: 8px;
}
.short{
  width: 0px;
  height: 10px; 
  border: 1px solid #000;
  margin-left: 8px;
}
.number{
  position: absolute;
  text-align: center;
  top: 0px;
  width: 98px; 
}


</style>